<template>
    <div>
        <transition-group name="fade" tag="span" appear>
            <span v-for="(char, index) in splitText" :key="index" class="char">{{ char }}</span>
        </transition-group>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';

const text = ref('Hello, Vue 3!');
const splitText = ref([]);

onMounted(() => {
    setTimeout(()=>{
    splitText.value = text.value.split(''); // 分割文本为字符数组

    },1000)
});
</script>
<style>
.fade-enter-active,
.fade-leave-active {
    transition: opacity 1s;
}

.fade-enter,
.fade-leave-to

/* .fade-leave-active in <2.1.8 */
    {
    opacity: 0;
}

.char {
    display: inline-block;
    /* 确保每个字符都是独立的块 */
}
</style>